<template>
  <div class="topHeader">
    <div class="left">
      <!--    <span>江西港综合服务门户平台</span>-->
      <img src="../../../assets/logo-title.png" alt="" height="40">
    </div>
    <div class="right">
      <div class="input-label">
        <input type="text" @keypress="keypress" v-model="searchWord" placeholder="请输入">
        <i class="el-icon-search" @click="$router.push({ name: 'searchPage', query: { data: searchWord } })"></i>
      </div>
      <i class="el-icon-chat-dot-round"></i>
      <div @click="$router.push({ name: 'messagePre' })">
        <el-badge :value="unReadNum" class="item">
          <i class="el-icon-message-solid"></i>
        </el-badge>
      </div>
      <i class="el-icon-s-tools" @click="$router.push({ name: systemMenu.name })" v-if="systemMenu != null"></i>
      <!--    <el-badge :value="unDoneNum" class="item">
     <i class="el-icon-message-solid" @click="$router.push({name:'user'})"></i>
    </el-badge>-->


      <!--    <el-dropdown @command="handleCommand">-->
      <!--     -->
      <!--          <el-dropdown-menu slot="dropdown">-->
      <!--            <el-dropdown-item command="logout">注销</el-dropdown-item>-->
      <!--          </el-dropdown-menu>-->
      <!--    </el-dropdown>-->

    </div>
  </div>
</template>

<script>
export default {
  name: "topHeader",
  computed: {
    unReadNum() {
      return this.$store.getters.unReadNum
    },
    systemMenu() {
      return this.$store.getters.systemMenu
    },
  },
  data() {
    return {
      searchWord: ''
    }
  },
  mounted() {
    this.queryMessageNum()
    this.$api.getUser({}).then((res) => {
      this.$store.dispatch("setUserInfo", res.data);
      localStorage.setItem("userInfo", JSON.stringify(res.data));
    });
    this.$api.queryNoticeNum({ readStatus: 1 }).then(res => {
      this.$store.dispatch('setUnRead', res.data)
    }).catch(err => {

    })
  },
  methods: {
    keypress(e) {
      if (e.keyCode == 13) {
        this.$router.push({ name: 'searchPage', query: { data: this.searchWord } })
      }
    },
    queryMessageNum() {
      this.$api.queryMessageNum().then(res => {
        this.$store.dispatch('setDoneNum', res.data)
      })
    },
    handleCommand(c) {
      if (c == 'logout') {
        $confirm('???').then(res => {
          console.log('1111')
        }).catch(err => {
          console.log(666)
        })
      }
    },
  },
}
</script>

<style scoped lang="less">
.topHeader {
  width: calc(100% - 40px);
  padding: 0 20px;
  height: 6.4rem;
  background: #3772FF;
  // background-image: url("../../../assets/header-bg.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    font-size: 16px;
    font-family: DOUYU;
    font-weight: normal;
    color: #FFFFFF;
    display: flex;
    align-items: center;

    img {
      height: 4.4rem;
    }
  }

  .right {
    display: flex;
    align-items: center;

    i {
      margin-left: 20px;
      color: white;
      font-size: 25px;
      cursor: pointer;
    }

    .input-label {
      position: relative;

      input {
        border: none;
        outline: none;
        width: 160px;
        height: 32px;
        background: #7AA1FF;
        border-radius: 4px;
        padding: 0 20px;
        color: white;
      }

      i {
        position: absolute;
        top: 6px;
        // text-align: center;
        right: 10px;
        font-size: 20px !important;
      }

      ::-webkit-input-placeholder {
        /* WebKit browsers，webkit内核浏览器 */
        color: #ccc;
        font-size: 14px;
        align-items: center;
      }

      :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #ccc;
        font-size: 14px;
        align-items: center;
      }

      ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #ccc;
        font-size: 14px;
        align-items: center;
      }

      :-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #ccc;
        font-size: 14px;
        align-items: center;
      }

    }
  }
}</style>
